<%@ page language="java"   pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<title>Flexigrid</title>
</head>
<body>
<div style="background-color: #c2dafa;text-align:right;width: 700px">   
	   <span style="font-size: 12px">姓名：</span>   
	    <input name="name" id="name">  
	    <span style="margin-left:10px;font-size: 12px">年龄：</span>   
	     <input name="age" id="age">  
		    <input type="button" onclick="loadGrid()" value="查询" />   
	</div>
	<table class="flexme3" style="display: none;"></table>
	</body>
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/comstyle/flexigrid/flexigrid_blue.css" />
	<jsp:include page="/common/jquery.jsp"/>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/flexigrid/flexigridExtended.js"></script>
	
		<link rel="stylesheet" href="${pageContext.request.contextPath}//comstyle/jquerytablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
		<script type="text/javascript" src="${pageContext.request.contextPath}//js/jquery/jquery.tablesorter.min.js"></script>
	
	
	<script type="text/javascript">
		
		
		

		$(".flexme3").flexigrid({
			url : 'flexigriddata2.js',
			dataType: 'json',
	colModel : [
		{display: '啊', name : 'iso', width : 40, sortable : true, align: 'center'},
		{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
		{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
		{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
		{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
		],
	buttons : [
		{name: 'Add', bclass: 'add', onpress : test},
		{name: 'Delete', bclass: 'delete', onpress : test},
		{separator: true}
		],
	/*searchitems : [
		{display: 'ISO', name : 'iso'},
		{display: 'Name', name : 'name', isdefault: true}
		],*/
	sortname: "iso",
	sortorder: "asc",
	usepager: true,
	title: '标题',
	useRp: true,
	rp: 15,// 每页默认的结果数
	rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
	pagestat: '显示 {from} 到 {to}， 共 {total} 条记录',//显示当前页和总页面的样式
	procmsg: '正在为您努力加载中 …',//正在处理的提示信息
	nomsg: '没有数据',//无结果的提示信息
    onError: '查询出错，请刷新',
	showTableToggleBtn: true,
	width: 'auto',
	errormsg:"加载失败，请稍后再试",
	pagetext: '第',
	outof: '页,总页数',
	findtext: '查找',
	checkbox:true,//是否要多选框
	rowId:'id',//绑定行的id
	height: 200
		});

		function test(com, grid) {
			if (com == 'Delete') {
				confirm('Delete ' + $('.trSelected', grid).length + ' items?')
			} else if (com == 'Add') {
				alert('Add New Item');
			}
		}
	</script>
	
</body>
</html>